/**
 * 添加信息窗口
 *    入参：BMAP
 *          map
 *          MARKERITEM_OBJ接口中的内容
 *          callback
 *    返参： callback函数中的值是AddmarkerData接口中的内容
 * */

interface MARKERITEM_OBJ {
  lng: number // 经度
  lat: number // 纬度
  [propName: string]: any
}

export const BMAP_ADDINFOWINDOW = (BMAP: any, map: any, markerItem: MARKERITEM_OBJ, callback: Function) => {
  const html = `
    <div style="height: 50px;display:flex;align-items:center;color: #666;padding-right:20px;width:100%;font-size:14px;">
      <div style="display: flex;flex-direction: column;align-items: flex-start;padding: 0 20px;border-right: 1px dashed #486482;">
        <span style="margin:4px 0;color: #5A7894;font-weight:900;">经度：${markerItem.lng}</span>
        <span style="margin:4px 0;color: #5A7894;font-weight:900;">纬度：${markerItem.lat}</span>
      </div>
      <div id="luxiang" style="display: flex;flex-direction: column;align-items: center;padding: 0 20px;cursor: pointer;color: #4397B9;">
        <img src="/src/assets/imgs/map-luxiang.png" style="width:18px;height:18px;margin-bottom:8px;"/>
        <span>录像</span>
      </div>
      <div id="shipin" style="display: flex;flex-direction: column;align-items: center;cursor: pointer;color: #4397B9;">
        <img src="/src/assets/imgs/map-shipin.png" style="width:18px;height:18px;margin-bottom:8px;"/>
        <span>视频</span>
      </div>
    </div>
  `
  const infoWindow = new BMAP.InfoWindow(html) // 创建信息窗口对象
  const point = new BMAP.Point(markerItem.lng, markerItem.lat)
  map.openInfoWindow(infoWindow, point) // 开启信息窗口
  let type: number = 0 // type值：1表示点击第一个图标，2表示点击第二个图标
  // 判断窗口的打开状态
  if (!infoWindow.isOpen()) {
    // 如果没有打开，则监听打开事件，获取按钮，添加事件
    infoWindow.addEventListener('open', () => {
      ;(document.getElementById('luxiang') as any).onclick = () => {
        // console.log('--去做你想做的事儿吧--')
        type = 1
        callback && callback(type)
      }
      ;(document.getElementById('shipin') as any).onclick = () => {
        // console.log('--去做你想做的事儿吧--')
        type = 2
        callback && callback(type)
      }
    })
  } else {
    // 如果已经打开，直接获取按钮，添加事件
    ;(document.getElementById('luxiang') as any).onclick = () => {
      type = 1
      callback && callback(type)
    }
    ;(document.getElementById('shipin') as any).onclick = () => {
      type = 2
      callback && callback(type)
    }
  }
}
